<template>
  <div class="content-container">
    
    <!-- 工具栏 -->
    <div ref="adminContentTools" class="content-tools-wrap hidden">
      	<div class="tools-left f-l">
      		
      		<el-button-group>
			       <el-button type="primary" @click="handleAdd">添加分组</el-button>
             <el-button type="primary" @click="">全部展开</el-button>
             <el-button type="primary" @click="">全部折叠</el-button>
			   </el-button-group>

      	</div>
      	<div class="tools-right f-r">
      		
            <div class="search-wrap" style="display: inline-block;">
              <el-input placeholder="请输入关键词" v-model="keywords">
                <template slot="append">
                  <i class="icon el-icon-search"></i>
                </template>
              </el-input>
            </div>
            
			
      	</div>
    </div>
    <!-- 内容栏--表格 -->
    <div class="content-table-wrap" v-loading="loading" loading-type="chrome-circle-turn" :style="{height:ResultHeight+'px'}">
    	
      <el-table
        ref="equipmentGroupTableTree"
        class="equipment-group-table-tree"
        v-if="data"
        size="small"
        :data="data"
        default-expand-all
        :expand-row-keys="['name']"
        row-key="id"
        :tree-props="{children: 'children'}"
        :header-cell-style="{background:'#42b983',color:'#ffffff'}"
        :cell-style="{borderWidth:0}"
        style="width: 100%;"
      >
        
        <el-table-column
          type="index"
          :index="tableIndex">
        </el-table-column>


        <el-table-column
          prop="name"
          label="组别">
        </el-table-column>

        <el-table-column
          fixed="right"
            label="操作"
            width="250"
        >

          <template slot-scope="scope">
            <el-button-group >
              <el-button type="primary" size="mini" icon="el-icon-upload2"></el-button>
              <el-button type="primary" size="mini" icon="el-icon-edit" @click="handleEdit(scope.row)"></el-button>
              <el-button type="primary" size="mini" icon="el-icon-delete" @click="handleDel(scope.row)"></el-button>
            </el-button-group>
          </template>

        </el-table-column>

      </el-table> 

    </div>

    
    <!-- 修改dialog -->
    <group-edit-dialog
      :visible="editDialogVisible"
      :form.sync='editForm'
      :type="editType"
      @cancel="editDialogCancel"
      @confirm="editDialogConfirm"
    ></group-edit-dialog>

  </div>

</template>

<script>
import { mapGetters } from 'vuex'
import groupEditDialog from '@/components/agriculture/equipment/groupEditDialog.vue'  

import {
  edit,
  del,
  list,
} from "@/api/equipment/group";



import adminMixins from "@/mixins/admin"
export default {
  name: 'role',
  mixins:[adminMixins],
  components:{
    groupEditDialog
  },
  computed: {
    ...mapGetters([
      'name',
      'permission',
      'userInfo'
    ])
  },
  data(){
  	return{
      keywords:'',
      loading:true,
      //1新增，2修改
      editType:1,
      //修改模态框的显示隐藏
      editDialogVisible:false,
  		data:null,
      testData:[{
        id: 1,
        label: '小麦实验田',
        children: [{
          id: 2,
          label: '继电器设备'
        },{
          id: 3,
          label: '采集设备'
        },{
          id: 4,
          label: '水稻试验田'
        }]
      },{
        id: 5,
        label: '继电器设备'
      },{
        id: 6,
        label: '采集设备'
      },{
        id: 7,
        label: '优质蔬菜试验园',
        children: [{
          id: 8,
          label: '继电器设备'
        },{
          id: 9,
          label: '采集设备'
        }]
      }],
  	  editForm:null
  	}
  },
  mounted(){
    //设置dom尺寸
    this.setSize();
  	this.loadData()
  },
  methods:{
    //表格序号
    tableIndex(index){
      return index+1
    },
  	//请求table数据
  	loadData(params = {}){
  		  this.loading = true;
        list(1, 999, Object.assign(params, this.query)).then(res => {

          this.loading = false;
          const result = res.data.data.records;
          
          
          this.data = this.convertData(result);

          //this.data = this.testData;
        });
      	
  	},
    convertData(data){
      
      return data
    },

    //新增
    handleAdd(){
        this.editForm = null;
        this.editType = 1;
        //模态框显示
        this.editDialogVisible = true;
    },
    //刷新当前页
    refresh(){
      this.loadData(this.page)
    },
    //点击操作的编辑
    handleEdit(row){
      this.editType = 2;
      this.editForm = row;
      //模态框显示
      this.editDialogVisible = true;
      
    },
  	//点击操作的删除
  	handleDel(row){
  		console.log(row)

  		this.$confirm('此操作将永久删除该分组, 是否继续?', '提示', {
          	confirmButtonText: '确定',
          	cancelButtonText: '取消',
          	type: 'warning'
        }).then(()=>{
        	return del(row.id);
        }).then((res) => {

        	this.loadData(this.page)
          	this.$message({
            	type: 'success',
            	message: '删除成功!'
          	});
        }).catch(() => {
          	this.$message({
            	type: 'info',
            	message: '已取消删除'
          	});          
        });
  	},
    //取消
    editDialogCancel(){
      this.editDialogVisible = false;
      this.editForm = null;
    },
    //确认
    editDialogConfirm(form){
      this.editDialogVisible = false;

      edit(form.data).then((res)=>{

        //this.editDialogVisible = false;
        this.loadData(this.page)
            this.$message({
              type: 'success',
              message: form.type ===1 ? '添加成功!' : '修改成功！'
            });
        })

      
    },
  }
}
</script>

<style lang="scss">
  .search-wrap .el-input-group__append{
    background: #409EFF;
    .icon{
      color: #ffffff;
    }
  }

  .content-table-wrap{
    .equipment-group-table-tree{
      .el-table__row{
        .cell{
          line-height: 40px;
          background: #f8f8f8;
          font-size: 18px;
        }
      }
    }
    
  }

  .equipment-group-tree{
    position: relative;
    .el-tree-node{
      .el-tree-node__content{
        height: 50px;
        line-height: 50px;
        font-size: 20px;
        background-color: #f8f8f8;
        margin-bottom: 5px;
        .equipment-group-tree-node{
          flex-grow: 1;
          .opration{
            float: right;
            padding: 0 15px;
          }
        }
      }
    }
  }
</style>

<style lang="scss" scoped>
.content {
  &-container {

  }
  /***搜索栏***/
  &-search-wrap{
    padding: 15px;
    border-bottom: 1px solid #E8EBEE;
  }
  /***工具栏***/
  &-tools-wrap{
    padding: 15px;
  }
  /***内容栏***/
  &-table-wrap{
    position: relative;
    padding: 15px;
    
    .cell{
      .icon{
        margin-right: 10px;
      }
    }
  }
  /***分页***/
  &-pagination-wrap{
    text-align: right;
  	padding-top: 15px;
  }
}
</style>
